<template>
  <div class="module-box">
    <div
      v-for="item in modules"
      :key="item.icon"
      class="module-item"
      :style="{ 'background-image': 'url(' + item.bgImg + ')' }"
    >
      <div class="module-left">
        <div class="module-info">
          <div class="module-num">
            <div class="module-count">{{ item.total }}</div>
            <div class="module-unit">{{ item.unit }}</div>
          </div>
          <div class="module-explain">{{ item.totalTitle }}</div>
          <div class="module-num module-space">
            <div class="module-count">{{ item.current }}</div>
            <div class="module-unit">{{ item.unit }}</div>
          </div>
          <div class="module-explain">{{ item.currentTitle }}</div>
        </div>
      </div>
      <div class="module-right">
        <i :class="item.icon"></i>
      </div>
    </div>
  </div>
</template>

<script>
  import { defineComponent, toRefs } from 'vue';
  import processBg from '@/assets/process.png';
  import annualBg from '@/assets/annual.png';
  import overtimelBg from '@/assets/overtime.png';
  import evectionBg from '@/assets/evection.png';

  export default defineComponent({
    name: 'WorkModule',
    setup() {
      const state = {
        processBg: processBg,
        modules: [
          {
            total: 2800,
            totalTitle: '总流程审批',
            current: 1820,
            currentTitle: '正在执行流程',
            unit: '项',
            icon: 'fal fa-sitemap',
            bgImg: processBg,
          },
          {
            total: 1050,
            totalTitle: '本年度请假数',
            current: 68.5,
            currentTitle: '本月请假数',
            unit: '人/天',
            icon: 'jeicon jeicon-table',
            bgImg: annualBg,
          },
          {
            total: 505,
            totalTitle: '本年度加班数',
            current: 98.5,
            currentTitle: '本月加班数',
            unit: '人/天',
            icon: 'fal fa-alarm-clock',
            bgImg: overtimelBg,
          },
          {
            total: 2855,
            totalTitle: '本年度出差数',
            current: 1868,
            currentTitle: '本月出差数',
            unit: '人/天',
            icon: 'fal fa-plane-departure',
            bgImg: evectionBg,
          },
        ],
      };
      return {
        ...toRefs(state),
      };
    },
  });
</script>
<style scoped lang="less">
  .module-box {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    .module-item {
      width: 297.5px;
      height: 165px;
      display: inline-flex;
      align-items: center;
      justify-content: space-between;
      background-repeat: no-repeat;
      background-position: center;
      background-size: 100% 100%;
      border-radius: 4px;
      padding: 30px 50px 25px;
      .module-left {
        .module-info {
          color: #ffffff;
          // font-family: 'PingFang SC, PingFang SC-Normal';
          .module-num {
            height: 26px;
            display: inline-flex;
            align-items: flex-end;
            .module-count {
              height: 26px;
              line-height: 26px;
              font-size: 26px;
            }
            .module-unit {
              font-size: 14px;
              padding-left: 10px;
            }
          }
          .module-space {
            margin-top: 10px;
          }
          .module-explain {
            height: 20px;
            line-height: 20px;
            font-size: 14px;
          }
        }
      }
      .module-right i {
        color: #ffffff;
        font-size: 50px;
      }
    }
  }
</style>
